<template>
  <div class="interaction-score">
    <crumb />
    <div class="container">
      <div class="box-left">
        <div class="section">
          <div class="title">
            {{scoreData.resourceCaseName}}<div class="sm-group"><span class="sm">环节：{{scoreData.caseNodeName}}</span></div>
          </div>
          <div class="content">
            {{scoreData.caseRequest}}
          </div>
        </div>
        <div class="section">
          <div class="title">
            {{type === 'group'? '实训小组' : scoreData.stuGroupName}}
          </div>
          <div class="list-box">
            <ul v-if="type === 'group'">
              <li v-for="(item, index) in scoreData.trainingInteractionScoreVo" :key="index" @click="nextFuncG(scoreData.isHeadman, item.isMyGroup, item.isScored, item.groupId)">
                {{item.stuGroupName}}
                <span class="right-arrow" v-if="scoreData.isHeadman === '1'">{{ item.isMyGroup === '1' ? '查看评分' : item.isScored === '1'? item.totalScore + '分' : '去评分'}}></span>
                <span class="right-arrow" v-else>{{ item.isMyGroup === '1' ? '查看评分' : item.isScored === '1'? item.totalScore + '分' : '未评分'}}></span>
              </li>
            </ul>
            <ul v-if="type === 'person'">
              <li class="row" v-for="(item, index) in scoreData.groupIndex" :key="index" @click="nextFuncP(item.isI, item.isScored, item.personScoreId, item.stuId)">
                <div class="name">
                  <img :src="item.headImgUrl" alt=""/>{{item.stuName}}
                </div>
                <div class="score">{{ item.isI === '1' ? item.totalScore + '分' : item.isScored === '1'? item.totalScore + '分' : '去评分'}} </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="box-right">
        <!-- 案例背景 -->
        <div class="section">
          <div class="title">
            案例背景
            <div class="tab">
              <div class="tab-item" :class="{'active': currentCasebg===item.displayType}" @click="tab(item.displayType)" v-for="(item, index) in scoreData.resourceCaseBgList" :key="index">
                <div>
                  {{item.displayType === '1'?'文本':''}}
                  {{item.displayType === '2'?'图片':''}}
                  {{item.displayType === '3'?'音频':''}}
                  {{item.displayType === '4'?'视频':''}}
                </div>
              </div>
            </div>
          </div>
          <template v-for="(item, index) in scoreData.resourceCaseBgList">
            <div class="content" :key="index">
              <!-- 文本 -->
              <div class="media-box" v-if="item.displayType === '1'&&currentCasebg===item.displayType">
                {{item.resourceCaseContentEn}}
              </div>
              <!-- 图片 -->
              <div class="media-box" v-if="item.displayType === '2'&&currentCasebg===item.displayType">
                <img :src="item.fileUrl" style="width:100%">
              </div>
              <!-- 音频 -->
              <div class="media-box" v-if="item.displayType === '3'&&currentCasebg===item.displayType">
                <audio class="audio" controls :src="item.fileUrl" controlsList="nodownload"></audio>
              </div>
              <!-- 视频 -->
              <div class="media-box" v-if="item.displayType === '4'&&currentCasebg===item.displayType">
                <video class="video" controls :src="item.fileUrl">
                </video>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- 评分查看 -->
    <el-dialog
      title="评分查看"
      :visible.sync="dialogVisible_1"
      width="50%"
      class="dialog-1">
      <div class="content">
        <div class="row" v-for="(item, index) in personScoreLookGroup" :key="index" @click="personScoreLookDetail(item.personScoreId)">
          <div class="name">
            <img :src="item.headImgUrl"/>{{item.stuName}}
          </div>
          <div class="score">{{item.totalScore}}分</div>
        </div>
      </div>
    </el-dialog>
    <!-- 评分明细 -->
    <el-dialog
      title="评分明细"
      :visible.sync="dialogVisible_2"
      width="50%"
      class="dialog-2">
      <div class="content" v-if="personScoreLookInfo.scoreDetail">
        <div class="row" v-for="(item, index) in JSON.parse(personScoreLookInfo.scoreDetail)" :key="index">
          <div class="label">{{item.evaluateItem}}</div>
          <div class="value">{{item.evaluateItemScore}}分</div>
        </div>
      </div>
    </el-dialog>
    <!-- 进行评分 -->
    <el-dialog
      title="进行评分"
      :visible.sync="dialogVisible_3"
      width="30%"
      class="dialog-3">
      <div class="content">
        <div class="row" v-for="(item, index) in scoreDetail" :key="index">
          <div class="label">
            {{item.evaluateItem}}
          </div>
          <div class="value">
            <input type="text" v-model="item.evaluateItemScore" placeholder="请输入您的评分"/>
          </div>
        </div>
        <div class="finish-btn" @click="commitPersonScore">完成</div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { start, personScoreGroupIndex, personScore, personScoreLook, personScoreLookDetail, commitPersonScore } from '@/api/student/training/interaction'
export default {
  name: 'interaction-score',
  data () {
    return {
      type: '', // group 小组 person 个人
      scoreData: '',
      currentCasebg: '', // 当前案例背景
      dialogVisible_1: false,
      dialogVisible_2: false,
      dialogVisible_3: false,
      personScoreLookGroup: '', // 个人得分
      personScoreLookInfo: '', // 个人得分详情
      personScoreData: '', // 个人评分弹窗
      scoreDetail: '' // 个人评分模板
    }
  },
  components: {
  },
  mounted () {
    this.type = this.$route.query.type
    if (this.type === 'group') {
      this.start()
    } else {
      this.personScoreGroupIndex()
    }
  },
  methods: {
    // 案例背景切换
    tab (type) {
      this.currentCasebg = type
    },
    // 小组评分
    async start () {
      const res = await start(
        {
          lessonCaseId: this.$route.query.lessonCaseId, // 课程案例id
          resourceNodeId: this.$route.query.resourceNodeId // 环节id
        }
      )
      console.log('====>小组', res)
      if (res.code === '200') {
        this.scoreData = res.data
        this.currentCasebg = res.data.resourceCaseBgList[0].displayType
      } else {
        this.$message.error(res.message)
      }
    },
    // 个人评分组员列表接口
    async personScoreGroupIndex () {
      const res = await personScoreGroupIndex(
        {
          caseStuGroupId: this.$route.query.caseStuGroupId // 学生分组id
        }
      )
      console.log('===>', res)
      if (res.code === '200') {
        this.scoreData = res.data
        this.currentCasebg = res.data.resourceCaseBgList[0].displayType
      } else {
        this.$message.error(res.message)
      }
    },
    // 个人得分查看
    async personScoreLook () {
      const res = await personScoreLook(
        {
          lessonICaseId: this.scoreData.lessonICaseId // 课程案例id
        }
      )
      if (res.code === '200') {
        this.personScoreLookGroup = res.data.personScoreLookStuGroups
      } else {
        this.$message.error(res.message)
      }
    },
    // 个人得分查看详情
    async personScoreLookDetail (personScoreId) {
      const res = await personScoreLookDetail(
        {
          personScoreId: personScoreId // 学生个人评分表id
        }
      )
      if (res.code === '200') {
        this.dialogVisible_2 = true
        this.personScoreLookInfo = res.data
      } else {
        this.$message.error(res.message)
      }
    },
    // 进入个人评分
    async personScore (personScoreId, stuId) {
      const res = await personScore(
        {
          lessonICaseId: this.scoreData.lessonICaseId, // 课程案例id
          personScoreId: personScoreId, // 被评学生个人表id
          resourceCaseId: this.scoreData.resourceCaseId, // 互动案例id
          stuId: stuId // 被评分学生id
        }
      )
      console.log('===>提交1', res)
      if (res.code === '200') {
        this.personScoreData = res.data
        this.scoreDetail = JSON.parse(res.data.scoreDetail)
      } else {
        this.$message.error(res.message)
      }
    },
    // 个人评分提交
    async commitPersonScore () {
      // 计算总分
      let totalScore = 0
      this.scoreDetail.forEach((item) => {
        totalScore += Number(item.evaluateItemScore)
      })
      const res = await commitPersonScore(
        {
          personScoreId: this.personScoreData.personScoreId, // 被评学生表id
          scoreDetail: JSON.stringify(this.scoreDetail), // 评分模板json
          totalScore: totalScore // 总分
        }
      )
      if (res.code === '200') {
        console.log('===>提交2', res)
        this.$router.go(0)
      } else {
        this.$message.error(res.message)
      }
    },
    // (小组)去评分 查看评分
    nextFuncG (isHeadman, isMyGroup, isScored, groupId) {
      // isHeadman 是否组长 isMyisGroup 是否本组 isScored 是否评分 groupId 小组id
      if (isMyGroup === '1') {
        // 查看评分
        this.$router.push(
          {
            path: 'interactionSeescore',
            query: {
              lessonICaseId: this.scoreData.lessonCaseId, // 课程案例id
              caseNodeId: this.scoreData.resourceNodeId, // 节点id
              groupId: this.scoreData.stuGroupId // 我的学生小组id
            }
          }
        )
        return
      }
      if (isHeadman === '1') { // 组长进入评分修改
        // 评分 修改
        this.$router.push(
          {
            path: 'interactionScoring',
            query: {
              groupId: groupId, // 要评分小组id
              resourceNodeId: this.scoreData.resourceNodeId // 环节id
            }
          }
        )
      } else { // 组员进入查看评分(必须打分)
        if (isScored === '1') {
          this.$router.push(
            {
              path: 'interactionScoring',
              query: {
                groupId: groupId, // 要评分小组id
                resourceNodeId: this.scoreData.resourceNodeId // 环节id
              }
            }
          )
        }
      }
    },
    // (个人)去评分 查看评分
    nextFuncP (isI, isScored, personScoreId, stuId) {
      if (isI === '1') {
        this.dialogVisible_1 = true
        this.personScoreLook()
      } else {
        this.dialogVisible_3 = true
        this.personScore(personScoreId, stuId)
      }
    }
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.interaction-score {
  .container {
    display: flex;
    justify-content: space-between;
    .box-left {
      width: 630px;
      background: #fff;
      padding: 15px;
      .section {
        .title {
          font-size: 14px;
          font-weight: bold;
          position: relative;
          .sm-group {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 12px;
            font-weight: initial;
            color: #828282;
          }
        }
        .content {
          color: #BBBBBB;
          font-size: 14px;
          padding:20px 0;
          line-height: 1.2;
        }
        .list-box {
          margin-top: 20px;
          ul {
            li {
              line-height: 60px;
              font-size: 14px;
              border-bottom: 1px solid #f5f5f5;
              padding: 0 10px;
              position: relative;
              cursor: pointer;
              &:hover {
                background: #f5f5f5;
              }
              .right-arrow {
                position: absolute;
                right: 10px;
              }
            }
            .row {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .name {
                img {
                  width: 40px;
                  height: 40px;
                  border-radius: 50%;
                  vertical-align: middle;
                  margin-right: 15px;
                }
              }
            }
          }
        }
      }
    }
    .box-right {
      width: 550px;
      min-height: 100%;
      background: #fff;
      padding: 15px;
      box-sizing: border-box;
      .title {
        font-size: 14px;
        font-weight: bold;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .tab {
          display: flex;
          .tab-item {
            width: 85px;
            line-height: 40px;
            border: 1px solid #D9D9D9;
            text-align: center;
            font-weight: initial;
            cursor: pointer;
            &.active {
              border: 1px solid #828282;
            }
          }
        }
        .time {
          font-size: 14px;
          color: #828282;
          position: absolute;
          right: 0;
          font-weight: normal;
        }
      }
      .content {
        color:#BBBBBB;
        font-size: 14px;
        line-height: 1.2;
      }
      .media-box {
        padding: 15px 0;
        .video, .audio {
          width: 100%;
        }
      }
    }
  }
  .dialog-1 {
    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 35px;
      .name {
        img {
          width: 40px;
          height: 40px;
          vertical-align: middle;
          margin-right: 15px;
          border-radius: 50%;
        }
      }
    }
  }
  .dialog-2 {
    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 55px;
    }
  }
  .dialog-3 {
    .row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 55px;
      .label {
        margin-right: 10px;
      }
      .value {
        flex: 1;
        input {
          width: 100%;
          height: 30px;
        }
      }
    }
    .finish-btn {
      width: 100%;
      line-height: 40px;
      border-radius: 10px;
      background: #009cf6;
      color: #fff;
      text-align: center;
      margin-top: 30px;
      cursor: pointer;
    }
  }
}

</style>
